<%--
  Created by IntelliJ IDEA.
  User: fengdefangxiang
  Date: 2022/1/14
  Time: 21:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/web/header.jsp" %>
</head>
<body>
<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">部门信息-查询条件</h2>
        <div class="layui-colla-content layui-show">

            <fieldset class="layui-elem-field layui-field-title" style="margin: 10px">
                <legend>部门信息-查询条件</legend>
                <div class="layui-field-box">
                    <form class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <label class="layui-form-label">编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="code" placeholder="请输入编号" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="请输入名称" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <label class="layui-form-label"></label>
                            <span>
                               <%--  layui提供的动态的绑定方式 --%>
                                <input type="button" value="查询" class="layui-btn layui-btn-sm" lay-submit
                                       lay-filter="search">
                                <input type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                                <input type="button" value="添加" class="layui-btn layui-btn-sm" onclick="openAdd()">
                            </span>
                            <input type="hidden" name="action" value="page">
                            <input type="hidden" name="pageIndex" value="1">
                            <input type="hidden" name="pageLimit" value="10">
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<table class="layui-table">
    <colgroup>
        <col width="15%">
        <col width="15%">
        <col width="15%">
        <col width="15%">
        <col width="15%">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>序号</th>
        <th>编号</th>
        <th>名称</th>
        <th>电话</th>
        <th>人数</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div id="pageInfo" style="text-align: right;padding-right: 30px"></div>
<script type="text/javascript">
    formOnSubmit('search', '/DepartmentServlet', 'json', function (data) {
        let curr = $("input[name='pageIndex']").val();
        let limit = $("input[name='pageLimit']").val();
        // 当页面加载时：
        // 1-分页控件的渲染 = 表格中全部数据的条数
        pageInfo('pageInfo',data.count,curr,limit,function (obj,first){
            $("input[name='pageIndex']").val(obj.curr);  // 分页之后应该显示第几页
            $("input[name='pageLimit']").val(obj.limit);
            if (!first){refresh();}  // 首次不执行     -- 写错/不写 会死循环
        })
        // 2-展示表格的数据 = 表格中当前页面的数据
        let html = "";
        var tpl = $("#tradd").html();
        $.each(data.list, function (i, dom) {
            dom.i = i+1+(curr-1)*limit;
            var d = {id: i+1, code: dom.code, name: dom.name, tel: dom.tel,count:dom.count}
            html += laytpl(tpl).render(d);
            //html += "<tr><td>"
        })
        $("tbody").html(html); // 拼接
    });

    function refresh() { // 模拟点击一次查询
        $("input[type='reset']").click();  // 先把输入的内容置空，恢复成默认的样子
        $("input[value='查询']").click();
    }

    refresh();  // 打开网页时执行一次功能
    function openAdd() {
        layerOpen('/web/page/department/add.jsp', refresh)
    }

    function del(code) {
        layerConfig(function () {
            ajax('/DepartmentServlet', {code: code, action: 'del'}, 'text', function (data) {
                if (data == 1) {
                    layer.msg("删除成功", refresh)
                }else if(data == 'E'){
                    layer.msg("删除失败,部门下存在员工")
                } else {
                    layer.msg("删除失败")
                }
            })
        })
    }

    function openUpd(code) {
        layerOpen('/web/page/department/upd.jsp?code='+code, refresh)
    }
</script>
<script type="text/html" id="tradd">
    <tr>
        <td>{{d.id}}</td>
        <td>{{d.code}}</td>
        <td>{{d.name}}</td>
        <td>{{d.tel}}</td>
        <td>{{d.count}}</td>
        <td>
            <a href="javascript:del('{{d.code}}')" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon layui-icon-delete"></i>
            </a>
            <a href="javascript:openUpd('{{d.code}}')" class="layui-btn layui-btn-sm">修改</a>
        </td>
    </tr>
</script>
</body>
</html>
